<template>
  <div ref="chartContainerCpu" class="chart-container"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const chartContainerCpu = ref(null);
const chartInstanceCpu = ref(null);

const updateCharts = () => {
  if (!chartInstanceCpu.value) {
    chartInstanceCpu.value = echarts.init(chartContainerCpu.value);
  }
  const option = {
    // 1. 不能显示tooltip
    // tooltip: {
    //   trigger: 'axis',
    // },
    // 2. 可以显示tooltip
    // tooltip: {
    // },
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'cross'
    //   },
    //   position: function (pt) {
    //     return [pt[0], '10%'];
    //   }
    // },
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'cross',
    //     label: {
    //       backgroundColor: '#6a7985'
    //     }
    //   },
    //   formatter: function(params) {
    //     console.log("wwwww")
    //     let tooltipContent = '<div style="text-align:center;">' + params[0].name + '</div>'; // x 轴的名称
    //     tooltipContent += '<div style="text-align:left;">'; // 左对齐
    //     params.forEach(function (param) {
    //       tooltipContent += param.seriesName + ': ' + param.value + '<br/>'; // 每个系列的名称和值
    //     });
    //     tooltipContent += '</div>';
    //     return tooltipContent;
    //   }
    // },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        },
        show: true // 显示准星指示器
      },
      formatter: function(params) {
        let tooltipContent = '<div style="text-align:center;">' + params[0].name + '</div>'; // x 轴的名称
        tooltipContent += '<div style="text-align:left;">'; // 左对齐
        params.forEach(function (param) {
          tooltipContent += param.seriesName + ': ' + param.value + '<br/>'; // 每个系列的名称和值
        });
        tooltipContent += '</div>';
        return tooltipContent;
      }
    },

    legend: {
      data: ['Email', 'Union Ads']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };

  chartInstanceCpu.value.setOption(option);

  // // 手动触发 tooltip
  // chartInstanceCpu.value.on('mouseover', (params) => {
  //   console.log('Tooltip triggered:', params);
  //   chartInstanceCpu.value.dispatchAction({
  //     type: 'showTip',
  //     seriesIndex: params.seriesIndex,
  //     dataIndex: params.dataIndex,
  //   });
  // });

  // // 确保图表在窗口大小变化时重新调整大小
  // window.addEventListener('resize', () => {
  //   if (chartInstanceCpu.value) {
  //     chartInstanceCpu.value.resize();
  //   }
  // });
};

onMounted(() => {
  updateCharts();
});

// onBeforeUnmount(() => {
//   if (chartInstanceCpu.value) {
//     chartInstanceCpu.value.dispose();
//   }
//   window.removeEventListener('resize', () => {
//     if (chartInstanceCpu.value) {
//       chartInstanceCpu.value.resize();
//     }
//   });
// });
</script>

<style lang="less">
.chart-container {
  width: 100%;
  height: 400px;
  position: relative;
  z-index: 0; /* 确保容器不会被其他元素覆盖 */
}
</style>
